<template>
  <div>
    <Card>
      <Table
        class="table"
        :loading="loading"
        highlight-row
        :columns="columns"
        :data="data"
      ></Table>
      <Page
        show-total
        class="page"
        :total="total"
        :current.sync="current"
        show-elevator
        @on-change="changePage"
      />
    </Card>
    <Modal
      v-model="userModal"
      title="查看用户"
      width="35"
      :closable="false"
      :mask-closable="true"
    >
      <Form ref="form" :model="userInfo" :label-width="90">
        <FormItem label="用户名：">
          <Input
            v-model="userInfo.username"
            placeholder="请输入登陆账号"
            :style="{ width: '200px' }"
          ></Input>
        </FormItem>
        <FormItem label="手机号：">
          <Input
            v-model="userInfo.password"
            placeholder="请输入登录密码"
            :style="{ width: '200px' }"
          ></Input>
        </FormItem>
        <FormItem label="邮箱：">
          <Input
            v-model="userInfo.email"
            placeholder="请输入登录密码"
            :style="{ width: '200px' }"
          ></Input>
        </FormItem>
        <FormItem label="手机号：">
          <Input
            v-model="userInfo.roleName"
            placeholder="请输入登录密码"
            :style="{ width: '200px' }"
          ></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button class="Button" type="primary" @click="submit">确认登陆</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      columns: [
        {
          title: "微信头像",
          key: "headImg",
          align: "center",
          render: (h, params) => {
            return h("img", {
              style: {
                width: "60px",
                marginTop: "5px",
                "border-radius": "50%",
              },
              attrs: {
                src: params.row.headImg,
                // 注意此处的地址是否要加上 this.baseUrl
              },
            });
          },
        },
        { title: "用户名", key: "username", align: "center" },
        { title: "邮箱", key: "email", align: "center" },
        { title: "手机号", key: "phone", align: "center" },
        { title: "角色名称", key: "roleName", align: "center" },
        { title: "组织名称", key: "organizationName", align: "center" },
        {
          title: "状态",
          key: "states",
          align: "center",
          render: (h, params) => {
            if (params.row.states == 0) {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "success",
                    },
                    style: {},
                  },
                  "正常"
                ),
              ]);
            } else {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                    },
                    style: {},
                  },
                  "禁用"
                ),
              ]);
            }
          },
        },
        {
          title: "操作",
          align: "center",
          width: 200,
          render: (h, params) => {
            return h("div", [
              h(
                "Div",
                {
                  style: {
                    color: '#1890ff',
                    cursor: 'pointer',
                  },
                  on: {
                    click: () => {
                      this.openPop(params.row);
                    },
                  },
                },
                "查看"
              ),
            ]);
          },
        },
      ],
      data: [],
      total: 0,
      current: 1,
      size: 10,

      userModal: false,
      userInfo: {
        username: "hanbo",
        password: "123",
        email: '123',
        roleName: '会员',
      },
    };
  },
  created() {
    this.getMembers();
  },
  methods: {
    // 获取列表
    getMembers() {
      // console.log();
      this.loading = true;
      this.$http(
        "/chongqing/stage/role/getRoleList",
        {
          current: this.current, // 第几页
          size: this.size, // 每页数据大小
        },
        "post",
        (res) => {
          if (res.data.code == 1000) {
            this.data = res.data.data.records;
            this.data.push({
              username: "hanbo",
              phone: "128138",
            });
            this.total = res.data.data.total;
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading = false;
        }
      );
      // this.$http(
      //   "/stage/member/getMembers",
      //   {
      //     current: this.current,
      //     size: this.size
      //   },
      //   "post",
      //   res => {
      //     if (res.data.code == 200) {
      //       this.data = res.data.data.records
      //       this.total = res.data.data.total
      //     } else {
      //       this.$Message.error(res.data.msg);
      //     }
      //     this.loading = false;
      //   }
      // );
    },
    // 切换页码
    changePage(data) {
      this.current = data;
      this.getMembers();
    },
    // 打开查看弹窗
    openPop(row) {
      console.log(row);
      this.userModal = true;
    },
  },
};
</script>

<style scoped>
.test {
  cursor: pointer;
}
</style>
